<!--
 * @Descripttion: 新增销售订单
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:03:55
 -->
<template>
  <div class="bill_container">
    <el-main>
      <el-form
        ref="billForm"
        :model="dataObj"
        :rules="ruleValidator"
        label-position="right"
        label-width="90px"
      >
        <div class="w300">
          <el-form-item label="单据编号: " prop="billNo">
            <el-input v-model="dataObj.billNo" size="mini" />
          </el-form-item>
          <el-form-item label="业务日期: " prop="businessTime">
            <el-date-picker
              v-model="dataObj.businessTime"
              type="datetime"
            />
          </el-form-item>
          <el-form-item label="付款单位: ">
            <el-input
              v-model="dataObj.comegoName"
              disabled
              size="mini"
              placeholder="选择客户或供应商,非必填"
            >
              <el-button slot="suffix" type="text" @click="btnSelectComego">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="账目类型: " prop="capitalCat">
            <SelectCapitalCat v-model="dataObj.capitalCat" :direction="direction" />
          </el-form-item>
          <el-form-item label="结算账户: " prop="accountId">
            <SelectAccount
              v-model="dataObj.accountId"
              class="wfull"
            />
          </el-form-item>
          <el-form-item v-if="!dataObj.comegoId" label="金额: " prop="amount">
            <el-input v-model="dataObj.amount" size="mini" />
          </el-form-item>
          <el-form-item v-if="dataObj.comegoId" :label="amountPayableText" prop="amountPayable">
            <el-input v-model="dataObj.amountPayable" size="mini" />
          </el-form-item>
          <el-form-item v-if="dataObj.comegoId" :label="amountPaidText" prop="amountPaid">
            <el-input v-model="dataObj.amountPaid" size="mini" />
          </el-form-item>
          <el-form-item label="经手人: " prop="handUserId">
            <SelectEmployee v-model="dataObj.handUserId" class="wfull" />
          </el-form-item>
          <el-form-item label="备注: ">
            <el-input v-model="dataObj.remarks" type="textarea" size="mini" />
          </el-form-item>
        </div>
      </el-form>
    </el-main>
    <el-dialog
      title="选择往来单位"
      width="90%"
      height="600px"
      top="20px"
      :visible.sync="isShowComego"
      destroy-on-close
      append-to-body
    >
      <ComegoList v-if="isShowComego" :direction="direction" @on-select="onComegoSelect" />
    </el-dialog>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { add } from './mixins'
import clonedeep from 'clonedeep'
import { getPayOptions, getReceOptions } from '@/api/finance/capital-cat.js'
import ComegoList from './comego-list'
import SelectAccount from '@/views/components/SelectAccount'
import SelectEmployee from '@/views/components/SelectEmployee'
import SelectCapitalCat from '@/views/components/SelectCapitalCat'

export default {
  name: 'ComegoReceiptDetail',
  components: { SelectCapitalCat, SelectAccount, SelectEmployee, ComegoList },
  filters: {
  },
  mixins: [add, oftenuse],
  props: {
    /**
     * 操作方式：
     * add, update, copyadd
     */
    operation: {
      type: String,
      default: 'add'
    },
    /**
     * 收支方向
     */
    direction: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      optionsData: { capital: [] },
      isShowComego: false,
      ruleValidator: {
        billNo: [
          { required: true, message: '单据编号不能为空！', trigger: 'blur' }
        ],
        businessTime: [
          { required: true, message: '业务日期不能为空！', trigger: 'blur' }
        ],
        capitalCat: [
          { required: true, message: '请选择账目类型！', trigger: 'blur' }
        ],
        accountId: [
          { required: true, message: '请选择结算账户！', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '发生金额不能为空！', trigger: 'blur' }
        ],
        amountPayable: [
          { required: true, message: '应收金额不能为空！', trigger: 'blur' }
        ],
        amountPaid: [
          { required: true, message: '实收金额不能为空！', trigger: 'blur' }
        ],
        handUserId: [
          { required: true, message: '请选择经手人！', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    'amountPayableText': function() {
      const val = this.direction === '1' ? '收' : '付'
      return `应${val}金额`
    },
    'amountPaidText': function() {
      const val = this.direction === '1' ? '收' : '付'
      return `实${val}金额`
    }
  },
  created() {
    console.log('created')
    this.initData()
  },
  methods: {
    btnSelectComego() {
      this.isShowComego = true
    },
    // api
    handleVali() {
      const v1 = this.handleValid('billForm')
      return Promise.all([v1])
    },
    getCapitalCat() {
      const method = this.direction === '1' ? getReceOptions : getPayOptions
      method().then(res => {
        if (res.data.flag) {
          this.$set(this.optionsData, 'capital', res.data.data)
        }
      })
    },
    initData() {
      this.initSaveData(this.direction)
    },
    /**
     * 重置数据
     */
    resetData() {
      this.initSaveData(this.direction)
    },
    // on
    onComegoSelect(data) {
      const { id, name } = data
      this.$set(this.dataObj, 'comegoId', id)
      this.$set(this.dataObj, 'comegoName', name)
      this.isShowComego = false
    },
    // api
    getData() {
      const data = clonedeep(this.dataObj)
      const { amount, amountPayable, amountPaid } = data
      if (!amountPayable) data.amountPayable = amount
      if (!amountPaid) data.amountPaid = amount
      return data
    }
  }
}
</script>
